데이터 구조 변환

작성일 : 2025.02.08

TypeScript에서 객체의 값을 변경해야 하는 상황은 자주 마주치게 됩니다. 특히 React와 같은 프레임워크를 사용할 때 상태 관리를 위해 객체를 다루는 경우가 많죠. 이번 글에서는 객체 값을 변경하는 여러 가지 방법을 알아보겠습니다.

1. 스프레드 연산자 사용하기

가장 일반적이고 간단한 방법은 스프레드 연산자(...)를 사용하는 것입니다.

const object = { name: "John", age: 25 };

// 객체의 특정 값만 변경
setObject({ ...object, age: 30 });

// 여러 값을 동시에 변경
setObject({ ...object, age: 30, name: "Mike" });

2. 특정 필드만 업데이트하기

필드명을 동적으로 지정하여 업데이트해야 할 때 유용한 방법입니다.

const updateField = (field: string, value: any) => {
  setObject(prev => ({
    ...prev,
    [field]: value
  }));
};

// 사용 예시
updateField('age', 30);

3. 중첩된 객체 업데이트하기

객체 안에 객체가 있는 중첩 구조를 다룰 때는 각 레벨마다 스프레드 연산자를 사용해야 합니다.

const user = {
  name: "John",
  address: {
    city: "Seoul",
    street: "123 Main St"
  }
};

// 중첩된 객체의 특정 값 업데이트
setUser(prev => ({
  ...prev,
  address: {
    ...prev.address,
    city: "Busan"
  }
}));

4. 배열 내의 객체 업데이트하기

배열 안에 있는 특정 객체를 변경할 때는 map 함수를 활용하면 편리합니다.

const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Mike" }
];

// 특정 id를 가진 사용자의 정보 업데이트
setUsers(prev => 
  prev.map(user => 
    user.id === 2 
      ? { ...user, name: "New Name" }
      : user
  )
);

5. Immer 사용하기

복잡한 객체 구조를 다룰 때는 Immer 라이브러리를 사용하면 코드가 훨씬 간단해집니다.

import produce from 'immer';

const complexObject = {
  users: [
    { id: 1, settings: { theme: 'dark' } }
  ]
};

setComplexObject(produce(draft => {
  draft.users[0].settings.theme = 'light';
}));

마무리

객체 값을 변경할 때는 불변성을 지키는 것이 중요합니다. 위에서 소개한 방법들은 모두 불변성을 유지하면서 객체를 업데이트하는 방법들입니다. 상황에 따라 가장 적절한 방법을 선택하여 사용하면 됩니다.

특히 객체 구조가 복잡해질수록 Immer와 같은 라이브러리의 사용을 고려해보는 것이 좋습니다. 코드의 가독성과 유지보수성을 크게 향상시킬 수 있기 때문입니다.